<template>
    <div>
        <textarea name="" id="" cols="30" rows="10" v-model="msg"></textarea>
        <div>
            <button @click="sendMsg()">发表评论</button>
        </div>
        <div v-for="item in feedList" :key="item.id">
            <p>{{item.name}}</p>
            <p>{{ item.msg }}</p>
            <button @click="delFeed(item.id)"> 删除</button>
            <button @click="toEdit(item)">修改</button>
            <hr/>
        </div>
        <!-- 弹框开始 -->
        <div class="modal" v-if="isShow">
            <div class="body">
                <h3>修改  <button  @click="isShow=false;">x</button></h3>
                <input type="text" v-model="temp.name"> <br>
                <textarea name="" v-model="temp.msg"></textarea>
                <div>
                    <button @click="sureEdit()">确定</button> 
                    <button  @click="isShow=false;">取消</button>
                </div>
            </div>
        </div>
        <!-- 弹框结束 -->
    </div>
</template>
<style>
.modal{
    position:fixed;
    left:0;
    top:0;
    bottom: 0;
    right:0;
    background-color: rgba(0,0,0,.3);
}
.modal .body{
    width: 300px;
    height: 300px;
    background-color: #fff;
    margin: 50px auto;
}
</style>
<script>
// 导入获取评论的api
import {GetFeed,SendMsg,DelFeed,UpdateFeed} from '@/api/feed'
export default {
    data(){
        return{
            feedList:[],//获取的评论列表
            params:{current:1,size:5},
            msg:"",//被发表的评论
            temp:{name:"",msg:""},//临时备修改的数据
            isShow:false,
        }
    },
    created(){
        // 组件创建完毕获取评论列表
        this.getFeed();
    },
    methods:{
        //  确定编辑
        sureEdit(){
            // 隐藏弹框
            this.isShow = false;
            UpdateFeed(this.temp)
            .then(res=>{
                if(res.data.code===0){
                    // 修改成功重新获评论
                    this.getFeed();
                }
            })
        },
        // 去编辑
        toEdit(item){
            // 显示弹框
            this.isShow = true;
            // 让temp的值为 item值解构
            this.temp = {...item};
        },
        // 删除评论
        delFeed(id){
            DelFeed(id)
            .then(res=>{
                if(res.data.code==0){
                    alert("删除成功");
                    // 刷新获取最新的评论
                    this.getFeed();
                }
            })
        },
        // 发表评论
        sendMsg(){
            // 执行SendMsg函数传递对作为参数{msg:"你好"}
            SendMsg({"msg":this.msg})
            .then(res=>{
                if(res.data.code===0){
                    // 发表成功
                    this.msg = "";//清空输入框
                    this.getFeed();//获取评论
                }
            })
        },
        // 获取评论
        getFeed(){
            GetFeed(this.params)
            .then(res=>{
                if(res.data.code===0){
                    // 更新feedList，评论列表
                    this.feedList = res.data.data;
                }
            })
        }
    }
}
</script>